

import FullCalendar from '@fullcalendar/react'; 
// import {Outlet} from "react-router-dom"
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from "@fullcalendar/interaction"
// import { Button} from "antd"
// 必须引入的样式文件
// import "@fullcalendar/core/main.css";
// import "@fullcalendar/common/main.css";

// id  //唯一标识，可以不填，持久化时编辑数据时使用
// title   //显示在日历上的内容
// allDay  //标识是否为全天，可以不填，调用event.allDay时会自动区分是否为全天
// start   //开始的时间，格式为 yyyy-MM-dd 或 yyyy-MM-dd HH:mm
// end //结束的时间，可以不填，格式为 yyyy-MM-dd 或 yyyy-MM-dd HH:mm
// url //可以不填，点击时跳转到指定url
// className   //数据的样式，可以不填
// color   //背景和边框颜色，可以不填，默认为#3a87ad
// backgroundColor //背景颜色，可以不填，默认为#3a87ad
// borderColor //边框颜色，可以不填，默认为#3a87ad
// textColor   //文本颜色,可以不填，默认为白色
let matchList = [
  {
    
    id: '1',
    name: '第一个任务',
    startTime: "2019-12-02 13:22:05",
    endTime: "2019-12-02 15:38:05",
    repeatExecute: false,
  },
  {
    id: '2',
    name: '第二个任务',
    startTime: "2019-12-05 09:45:23",
    endTime: "2019-12-05 15:10:23",
    repeatExecute: false,
  },
  {
    id: '3',
    name: '第三个任务',
    startTime: "2019-12-07 15:37:18",
    endTime: "2019-12-07 19:43:18",
    repeatExecute: false,
  },
  {
    id: '4',
    name: '第四个任务',
    startTime: "2019-12-07 14:49:05",
    endTime: "2019-12-08 03:15:05",
    repeatExecute: false,
  },
];

let repeatMatchList = [
  {
    id: '5',
    name: '每周一，周三重复任务',
    startDate: "2019-12-10", // 任务创建于12月10日
    startTime: "09:10:00", // 每次任务的开始时间
    endTime: "17:30:23", // 每次任务的结束时间
    repeatDates: ["星期一", "星期三"],
    repeatExecute: true,
  },
  {
    id: '5',
    name: '每周一，2222周三重复任务',
    startDate: "2019-12-10", // 任务创建于12月10日
    startTime: "09:20:00", // 每次任务的开始时间
    endTime: "17:30:23", // 每次任务的结束时间
    repeatDates: ["星期一", "星期三"],
    repeatExecute: true,
    borderColor:"red",
  },
  {
    id: '5',
    name: '每周一，周三重复任务',
    startDate: "2019-12-10", // 任务创建于12月10日
    startTime: "09:10:00", // 每次任务的开始时间
    endTime: "17:30:23", // 每次任务的结束时间
    repeatDates: ["星期一", "星期三"],
    repeatExecute: true,
  },
  {
    id: '5',
    name: '每周一，2222周三重复任务',
    startDate: "2019-12-10", // 任务创建于12月10日
    startTime: "09:20:00", // 每次任务的开始时间
    endTime: "17:30:23", // 每次任务的结束时间
    repeatDates: ["星期一", "星期三","星期四"],
    repeatExecute: true,
  },
  {
    id: '5',
    // name: '每周一，hhh22周三重复任务',
    startDate: "2019-12-10", // 任务创建于12月10日
    startTime: "09:50:00", // 每次任务的开始时间
    endTime: "17:30:23", // 每次任务的结束时间
    repeatDates: ["星期一", "星期三"],
    repeatExecute: true,
  },
  {
    id: '6',
    // name: '每周一，2222周三重复任务',
    startDate: "2019-12-10", // 任务创建于12月10日
    startTime: "21:40:00", // 每次任务的开始时间
    endTime: "17:30:23", // 每次任务的结束时间
    repeatDates: ["星期一", "星期三"],
    repeatExecute: true,
  },
  {
    id: '6',
    name: '每周二重复任务',
    // startDate: "2019-12-02", // 任务创建于12月2日
    // startTime: "15:10:00", // 每次任务的开始时间
    // endTime: "17:30:23", // 每次任务的结束时间
    repeatDates: ["星期二", "星期三",],
    repeatExecute: true,
  }
];


function Calender() {
  matchList && matchList.filter(match => !match.repeatExecute).forEach(item => {
    item.title = item.name;
    item.start = item.startTime;
    item.end = item.endTime;
    item.borderColor = 'red';
  })
  
const repeatMap = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];


function includes (arr1, arr2) {
  return arr2.every(val => arr1.includes(val));
}
function formartRepeat (value) {
  

  switch (value) {
    case '星期一':
      value = 1;
      break;
    case '星期二':
      value = 2;
      break;
    case '星期三':
      value = 3;
      break;
    case '星期四':
      value = 4;
      break;
    case '星期五':
      value = 5;
      break;
    case '星期六':
      value = 6;
      break;
    case '星期日':
      value = 0;
      break;
  }
  return value;
}
  repeatMatchList && repeatMatchList.filter(match => match.repeatExecute).forEach(item => {
    // if (includes(repeatMap, item.repeatDates)&&) {
      item.title = item.name;
      item.borderColor = 'red';
      item.daysOfWeek = [];
      item.color="red"
      item.startRecur = item.startDate;
      item.repeatDates.forEach(date => {
        console.log(date);
        item.daysOfWeek.push(formartRepeat(date))
      })
    // }
  })

  function eventClick  (eventInfo) {
    console.log(eventInfo);
    console.log(eventInfo.event._def);
  }

  return (
    <div >
        <div id="calendar">
        <FullCalendar
           height={700} // 此处高度为方便截图，可不设置
          //  width={100}
           defaultView="dayGridPlugin"
           selectable={true}
          //  initialView="dayGridMonth"
           plugins={[dayGridPlugin,interactionPlugin]}
           headerToolbar={{
             left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
             center: "title", // 当前年月
             right: "dayGridMonth,timeGridWeek,timeGridDay" // 月 周 天
           }}
          //  locale='zh-cn' 
          // buttonText={{
          //   today: '今天',
          //   month: '月',
          //   week: '周',
          //   day: '天'
          // }}
          
          eventSources={[matchList, repeatMatchList]}
          dateClick = {function( date ) {
            //do something here...
            console.log('dayClick触发的时间为：',date );
            // ...
        }}
        dayMaxEventRows={3}
        // eventLimitText={"更多"}
        // moreLinkClick={"更多"}
      //   select={function( start, end ){
      //     //do something here...
      //     console.log('select触发的开始时间为：', start);
      //     console.log('select触发的结束时间为：', end);
      //     // ...
      //    }}
      //    views={{
      //     agenda: {
      //       eventLimit: 3 // adjust to 6 only for agendaWeek/agendaDay
      //   }
      //    }
      // }
      // eventLimit={ {
      //   'agenda': 3, // adjust to 6 only for agendaWeek/agendaDay 
      //   'default': true // give the default value to other views 
      // }} 
        //  eventLimit={true} 
        //  eventLimitText={'Something'} 
         eventMouseover={function( start, end ){
          //do something here...
          console.log('eventMouseover', start);
          console.log('eventMouseover', end);
          // ...
         }}
    
          eventClick={eventClick}
        
   
        eventRender={ function(event, element) {
          console.log('select触发的开始时间为：', event);
          element.attr('title', event.tip);
      }}
        />
        </div>


        
        {/* <Outlet></Outlet> */}
  
    </div>
  );
}

export default Calender;
